/* 
* 弹出消息
* @param {String} content  消息内容
* @param {String} type  消息类型 info error success warn
* @param {String} duration  多久后消失，为不消失
* @param {HEMLElement} container  容器，消息会显示到该容器的正中； 如果不传，则显示到页面的正中
*/

import getComponentRootDom from "./getComponentRootDom";
import Icon from '@/components/Icon';
import styles from './showMessage.module.less';

export default function (options = {}) {

    const content = options.content || "";
    const type = options.type || "home";
    const duration = options.duration || 2000;
    const container = options.container || document.body;

    //创建消息元素
    const div = document.createElement("div");
    const iconDom = getComponentRootDom(Icon, {
        type,
    })
    div.innerHTML = `<span class="${styles.icon}">${iconDom.outerHTML}</span><div>${content}</div>`

    //设置样式
    const typeClassName = styles[`message-${type}`]  //类型样式名
    div.className = `${styles.message} ${typeClassName}`;

    //将div加入到容器当中
    if (!options.container) {
        options.container = document.body;
    } else {
        //判断容器的position是否改动过
        if (getComputedStyle(options.container).position === "static") {
            options.container.style.position = "relative";
        }
    }
    container.appendChild(div);

    //浏览器强行渲染-浏览器是先执行完代码再渲染，没有过度动画，所以先强行渲染一边，再进行样式的修改，出现动画效果
    div.clientHeight;  //导致reflow

    //回归到正常位置
    div.style.opacity = 1;
    div.style.transform = `translate(-50%,-50%)`

    //等一段时间消失
    setTimeout(() => {
        div.style.opacity = 0;
        div.style.transform = `translate(-50%,-50%) translateY(-25px)`
        div.addEventListener("transitionend", function(){
          div.remove();
          //运行回调函数
          options.callback && options.callback();
        }, { once: true })
    }, duration)
}